<template>
<view class="goods-list" v-if="list.length">
  <view class="list-item" v-for="(item,index) in list" :key="item.sessionId">
    <h2>{{item.goodsDesc}}·{{item.goodsName}} <span>限量{{item.totalNums}}件</span></h2>
    <view class="item-main">
      <view class="main-goods">
        <image :src="item.goodsRecordImg" mode="widthFix"></image>
        <span class="goods-status" :class="item.sessionState == 1?'active':''">{{sessionStatus[item.sessionState]}}</span>
      </view>
      <view class="main-info">
        <template v-if="type === 'records'">
          <span style="margin: 0;" class="info-time">开奖时间<br>{{item.lotteryTime}}</span>
          <view class="info-title" style="align-items: center; justify-content: space-between; margin: 10rpx 0;">
            你有{{item.codeNums || 0}}个抽奖码 
            <image class="title-img" v-if="item.isLucky == '0'" src="@/static/未中奖.png" mode="widthFix"></image>
            <image class="title-img" v-if="item.isLucky == '1'" src="@/static/已中奖.png" mode="widthFix"></image>
            <image class="title-img" v-if="item.isLucky == '2'" src="@/static/未参与.png" mode="widthFix"></image>
          </view>
        </template>
        
        <template v-else>
          <view class="info-title">
            抽奖码剩余 
            <step-bar style="flex: 1; margin-left: 20rpx;" :percent='item.remainingRate | percent'></step-bar>
          </view>
          <span class="info-time">开奖时间<br>{{item.lotteryTime}}</span>
        </template>
        <view class="info-button">
          <view>￥<strong>{{item.awardPrice === null?'-':item.awardPrice}}</strong> <span style="margin-left: 10rpx; color: #ccc;text-decoration: line-through;" v-if="item.goodsPrice">￥{{item.goodsPrice}}</span></view>
          <button v-if="type === 'records'" :class="item.state == '0'?'active':''" @click="handleToLink(item.sessionId)">{{item.state == '0'?'去查看':'看公示'}}</button>
          <template v-else>
            <button v-if="item.state == 0" @click="handleReceive(item.sessionId)">免费领码抽奖</button>
            <button v-else :class="item.state==1?'active':'check'" @click="handleToLink(item.sessionId)">{{item.state == 1?'领更多夺宝码':'查看抽奖情况'}}</button>
          </template>
        </view>
      </view>
    </view>
  </view>
  
  <uni-popup ref="draw" type="center">
    <draw-code :code="codeList" @on:CLOSE='$refs.draw.close()' @on:MORE="handleToLink(currentId)"></draw-code>
  </uni-popup>
</view>
<view class="var-empty" v-else>
  <image src="../static/无记录.png" mode="widthFix"></image>
  <view>暂无数据</view>
</view>
</template>

<script>
  import stepBar from '@/components/step-bar'
  import DrawCode from '@/components/popup-draw-code.vue'
  import { getUrlParam } from '@/utils/Tools.js'
  export default {
    name:"goods-list",
    components:{stepBar,DrawCode},
    props:{
      list:{
        type:Array,
        require:true
      },
      type:{
        type:String,
        default:'goods'
      }
    },
    filters:{
      percent(data){
        return data?data.replace('%',''):0
      }
    },
    data() {
      return {
        sessionStatus:['未开始','进行中','开奖后','已结束'],
        codeList:[],
        currentId:''
      };
    },
    methods:{
      
      handleToLink(e){ ///  去详情
        uni.navigateTo({
          url:`/pages/index/detail?id=${e}`
        })
      },
      async handleReceive(e){  ///  点击了免费领取
        this.currentId = e
        const headers = {
          sign: this.$sign
        }
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/code/freeTreasureCode?userPhone=${this.$mobile}&sessionId=${e}`,'',1,headers)
        if(res.code == 200){
          this.codeList = [res.data.freeTreasureCode]
          this.$refs.draw.open()
          this.$emit('on:UPDATE')
        }else{
          this.$toast(res.msg)
        }
         
        this.$point({
          action_code:"960000001",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "session_id",  // 必须传
            v: e
          }],
        })
      },
    }
  }
</script>

<style lang="less" scoped>

.goods-list{
  padding: 0 30rpx 30rpx;
  margin-top: 40rpx;
  .list-item{
    border-radius: 20rpx;
    padding: 30rpx;
    background: #fff;
    margin-bottom: 20rpx;
    h2{
      display: flex;
      justify-content: space-between;
      font-size: 32rpx;
      margin-bottom: 40rpx;
      span{
        color: #ccc;
        font-size: 30rpx;
        font-weight: 400;
        white-space: nowrap;
      }
    }
    .item-main{
      display: flex;
      align-items: flex-start;
      .main-goods{
        margin-right: 30rpx;
        width: 35%;
        position: relative;
        border: .7px solid #eee;
        .goods-status{
          padding: 0 10rpx;
          position: absolute;
          bottom: 0;
          left: 0;
          line-height: 40rpx;
          font-size: 22rpx;
          background: #000;
          color: #fff;
          border-top-right-radius: 16rpx;
          text-align: center;
          &.active{
            background: linear-gradient(90deg,#d6a180,#b48659);
          }
        }
      }
      .main-info{
        flex: 1;
        .info-title{
          display: flex;
          .title-img{
            width: 90rpx; transform: rotate(-30deg);
          }
        }
        .info-time{
          display: inline-block;
          padding: 6rpx 20rpx;
          color: #d6341e;
          border: .3px solid #d6341e;
          margin: 24rpx 0 34rpx;
          border-radius: 6rpx;
          font-size: 24rpx;
        }
        .info-button{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          color: #d6341e;
          strong{
            font-size: 36rpx;;
          }
          button{
            border-radius: 50rpx;
            line-height: 55rpx;
            font-size: 28rpx;
            background: #000;
            color: #f3d9bd;
            border: 1px solid transparent;
            &.active{
              background: #d6341e;
              color: #fff;
            }
            &.check{
              border-color: #d6341e;
              background: #fff;
              color: #d6341e;
            }
          }
        }
      }
    }
    
  }
}
</style>